<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
    // 如果应用 加载 刚开始我加载A应用 window.a  B应用 (window.a);
    // 单应用切换  沙箱 创造一个干净的环境给这个子应用使用，当切换时 可以选择丢弃属性和恢复属性

    // JS沙箱  proxy 

    // 快照沙箱  1年前拍一张  在拍一张  （将区别保存起来） 在回到一年前
    class SnapshotSandbox{
        constructor(){
            this.proxy = window; // window属性
            this.modifyPropsMap = {}; // 记录在window上的修改
            this.active();
        }
        active(){ // 激活
            this.windowSnapshot = {}; // 拍照 
            for(const prop in window){
                if(window.hasOwnProperty(prop)){
                    this.windowSnapshot[prop] = window[prop];
                }
            }
            Object.keys(this.modifyPropsMap).forEach(p=>{
                window[p] = this.modifyPropsMap[p];
            })
        }
        inactive(){ // 失活
            for(const prop in window){
                if(window.hasOwnProperty(prop)){
                    if(window[prop]  !== this.windowSnapshot[prop]){
                        this.modifyPropsMap[prop] = window[prop];
                        window[prop] = this.windowSnapshot[prop]
                    }
                }
            }
        }
    }
    let sandbox = new SnapshotSandbox();

    // 应用的运行 从开始到结束 ，切换后不会影响全局 
    ((window)=>{
        window.a = 1;
        window.b = 2;
        console.log(window.a,window.b);
        sandbox.inactive();
        console.log(window.a,window.b);
        sandbox.active();
        console.log(window.a,window.b);
    })(sandbox.proxy); // sandbox.proxy就是window
    // 如果是多个子应用就不能使用这种方式了，es6的proxy
    // 代理沙箱可以实现多应用沙箱。把不同的应用用不同的代理来处理




    
    </script>
</body>
</html>